<template>
  <div class="container">
    <div class="bill-detail" v-show="showDetail">
      <div class="weui_cells_title">就诊卡：</div>
      <div class="weui_cells weui_cells_access" style="margin-top:10px;">
        <a class="weui_cell" href="javascript:;">
          <div class="weui_cell_hd">
            <i class="fa fa-credit-card fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
          </div>
          <div class="weui_cell_bd weui_cell_primary">
            <p>{{order.cardName}} <span style="margin-left:15px;" class="blue_tag">{{order.cardType}}</span></p>
            <p>{{order.cardNum}}</p>
          </div>
        </a>
      </div>
      <div class="weui_cells_title">缴费详情：</div>
      <div class="weui_cells">
        <!-- <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">订&nbsp;&nbsp;单&nbsp;&nbsp;号</span>
              <span class="info">{{order.num}}</span>
            </p>
          </div>
        </div> -->
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">流&nbsp;&nbsp;水&nbsp;&nbsp;号</span>
              <span class="info">{{order.clinicNo}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">开单科室</span>
              <span class="info">{{order.orderDept}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">开单时间</span>
              <span class="info">{{order.orderDate}}</span>
            </p>
          </div>
        </div>
        <div class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span class="label">缴费金额</span>
              <span class="info">{{order.prescMoney}} 元</span>
            </p>
          </div>
        </div>
      </div>
      <div v-show="yiBaoStatus == 2 || yiBaoStatus == 4">
        <div class="weui_cells_title">医保：</div>
        <div class="weui_cells">
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> {{yiBaoFailedMsg}}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div v-show="yiBaoStatus == 1">
        <div class="weui_cells_title">医保：</div>
        <div class="weui_cells">
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">自费金额</span>
                <span class="info">{{personalMoney}} 元</span>
              </p>
            </div>
          </div>
          <div class="weui_cell">
            <div class="weui_cell_bd weui_cell_primary">
              <p>
                <span class="label">医保记账</span>
                <span class="info">{{yiBaoMoney}} 元</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <a @click="doBill" href="javascript:;" style="margin:10px 8px;" class="weui_btn weui_btn_primary">确认缴费</a>
      <div v-show="yiBaoStatus == 1">
        <a @click="payFailed" href="javascript:;" style="margin:10px 8px;" class="weui_btn weui_btn_default">取消缴费</a>
        <p style="padding:10px;" class="am-ft-sm am-ft-gray">
          <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 如想去窗口缴费，请点击【取消缴费】按钮后再去窗口缴费。
        </p>
      </div>
      <div>
        <p style="padding:10px;" class="am-ft-sm am-ft-gray">
          <span class="am-ft-orange"><i class="fa fa-info-circle"></i></span> 支付宝缴费支持自费，不支持公费缴费。
        </p>
      </div>
      <div class="weui_cells_title">明细列表：</div>
      <div class="weui_cells">
        <div v-for="item in items" class="weui_cell">
          <div class="weui_cell_bd weui_cell_primary">
            <p>
              <span style="display: block;">名称：<span style="color: #0ae;">{{item.name}}</span></span>
              <span style="display: block;width: 100%;">
              <span style="display: inline-block;width: 50%;float: left;">费用：<span style="color: #0ae;">{{item.money}} 元</span></span>
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="bill-success" v-show="showSuccess">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">缴费成功</h2>
          <p class="weui_msg_desc">{{succeedMsg}}</p>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="goOrderDetail" class="weui_btn weui_btn_primary">查看详情</a>
          </p>
        </div>
      </div>
    </div>
    <div class="bill-failed" v-show="showFailed">
      <div class="weui_msg">
        <div class="weui_icon_area"><i class="weui_icon_warn weui_icon_msg"></i></div>
        <div class="weui_text_area">
          <h2 class="weui_msg_title">缴费失败</h2>
          <p class="weui_msg_desc">{{failedMsg}}</p>
        </div>
        <div class="weui_opr_area">
          <p class="weui_btn_area">
            <a href="javascript:;" @click="gotoPortal" class="weui_btn weui_btn_primary">返回首页</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
.weui_msg_desc label {
  width: 80px;
  display: inline-block;
}

.weui_msg_desc span {
  color: #0ae;
  font-weight: bolder;
}

span.label {
  display: inline-block;
  width: 80px;
}

span.info {
  color: #0ae;
}

.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>
<script >
import $ from 'jquery'
import {
  setBillOrderNum,
  showCommonToast,
  hideCommonToast,
  showLoadingToast,
  hideLoadingToast
} from '../../vuex/actions'

import _ from 'underscore'

export default {
  name: 'DoBillView',
  data: function () {
    return {
      isCity: false,
      showDetail: true,
      showSuccess: false,
      showFailed: false,
      failedMsg: '',
      succeedMsg: '',
      isPaySucceed: false,

      yiBaoStatus: -1,
      yiBaoFailedMsg: '',
      personalMoney: '',
      yiBaoMoney: '',
      items: []
    }
  },
  methods: {
    doBill: function () {
      if (this.order.id === -1) {
        return
      }
      var self = this

      this.showLoadingToast({ msg: '正在缴费...' }, false)
      this.$ajax.get('PayBill', 'Bill', {
        orderId: this.order.id
      }, false).then(function (data) {
        if (data.ResultCode !== '0') {
          self.failedMsg = data.ResultMsg
          self.showDetail = false
          self.showSuccess = false
          self.showFailed = true
          self.hideLoadingToast()
        } else {
          self.callPay(data.PayString)
        }
      })
    },
    gotoPortal: function () {
      this.$router.replace({ name: 'portal' })
    },
    goOrderDetail: function () {
      this.$router.replace({ name: 'billOrderDetail', params: { orderId: this.order.id } })
    },
    callPay: function (payString) {
      // 支付操作
      var form = $(payString)
      form.submit()
    },
    payFailed: function () {
      this.cancelPay()
      this.hideLoadingToast()

      this.showCommonToast({ msg: '您已取消缴费' })
      window.history.go(-1)
    },
    paySucceed: function () {
      this.isPaySucceed = true

      var self = this
      this.$ajax.get('GetBillStatus', 'Bill', {
        orderId: this.order.id
      }, false).then(function (data) {
        if (data.ResultCode !== '0') {
          self.hideLoadingToast()
          window.history.go(-1)
        } else {
          if (data.BillStatus === '1') {
            self.failedMsg = data.FailedMsg
            self.showDetail = false
            self.showSuccess = false
            self.showFailed = true
            self.hideLoadingToast()
          } else if (data.BillStatus === '0') {
            if (self.isCity) {
              self.citySucceed()
            } else {
              self.showDetail = false
              self.showSuccess = true
              self.showFailed = false
              self.succeedMsg = data.ResultMsg
              self.hideLoadingToast()
            }
          } else {
            window.setTimeout(function () {
              self.paySucceed()
            }, 500)
          }
        }
      })
    },
    cancelPay: function () {
      if (this.order.id !== -1 && !this.isPaySucceed) {
        this.$ajax.get('PayFailed', 'Bill', {
          orderId: this.order.id
        }, false).then(function (data) {

        })
      }
    },
    citySucceed: function () {
      var self = this

      this.$ajax.get('GetTemplateMsg', 'City', {
        orderId: this.order.id,
        msgtype: 'jiaofei'
      }, false).then(function (data) {
        self.showDetail = false
        self.showSuccess = true
        self.showFailed = false
        self.hideLoadingToast()
        window.location = data
      })
    }
  },
  vuex: {
    getters: {
      order: ({ billOrder }) => billOrder
    },
    actions: {
      setBillOrderNum,
      showCommonToast,
      hideCommonToast,
      showLoadingToast,
      hideLoadingToast
    }
  },
  ready: function () {
    this.isCity = this.$cookie.get('IsCity') && this.$cookie.get('IsCity') === '1'

    if (this.$route.query.clinicNo) {
      this.setBill(
        this.$route.query.clinicNo,
        this.$route.query.prescMoney,
        this.$route.query.orderDept,
        this.$route.query.orderDate
        // this.$route.query.doctorId,
        // this.$route.query.settleCode
      )
    }

    var self = this
    this.$ajax.get('CreateBillOrder', 'Bill', {
      cardId: this.order.cardId,
      clinicNo: this.order.clinicNo,
      prescMoney: this.order.prescMoney,
      orderDept: this.order.orderDept,
      orderDate: this.order.orderDate
      // doctorId: this.order.doctorId,
      // settleCode: this.order.settleCode
    }).then(function (data) {
      if (data.ResultCode !== '0') {
        self.failedMsg = data.ResultMsg
        self.showDetail = false
        self.showSuccess = false
        self.showFailed = true
      } else {
        self.setBillOrderNum(data.OrderId, data.OrderNo)

        self.yiBaoStatus = data.YiBaoStatus
        self.yiBaoFailedMsg = data.YiBaoFailedMsg
        self.personalMoney = data.PersonalMoney
        self.yiBaoMoney = data.YiBaoMoney

        self.items = _.map(data.Items, function (val) {
          return {
            type: val.Type,
            name: val.Name,
            // account: val.Account,
            // unit: val.Unit,
            // itemPrice: val.ItemPrice,
            money: val.Money
          }
        })
      }
    })
  },
  route: {
    activate: function (transition) {
      // 阻止页面刷新，刷新时直接跳往首页
      if (transition.from.name === undefined && !this.$route.query.clinicNo) {
        this.$router.go({ name: 'portal' })
      } else {
        transition.next()
      }
    },
    deactivate: function (transition) {
      // 不需要，16分钟后会自动关闭
      // this.cancelPay()
      this.setBillOrderNum(-1, '')
      transition.next()
    }
  }
}
</script>
